<template>
	<view class="page">
		<view class="show-box">
			<view class="textarea">
				<textarea :maxlength='-1' v-model="info" placeholder="店铺优惠..." />
			</view>
			
			<view class="upfile-img-box">
				<view class="img-box" v-for="(item, index) in imgArr" :key="item">
					<u-icon class="img-close" name="close" color="#030201" size="30" @click="imgArr.splice(index, 1)"></u-icon>
					<image :src="$wanlshop.oss(item)" mode="aspectFit"></image>
				</view>
				<view class="img-box flex align-center justify-center" @click="addImgFile">
					<u-icon name="plus" color="#A8A8A8" size="100"></u-icon>
				</view>
			</view>
			
			<view class="label-box">
				<view class="item-label border-top" @click="goToSelectMap">
					<view class="left-icon">
						<u-icon size="40" name="map"></u-icon>
					</view>
					<view class="right-content">
						<view>{{ address || '所在位置'}}</view>
						<u-icon size="30" color="#afafaf" name="arrow-right"></u-icon>
					</view>
				</view>
				
				<view class="item-label border-top">
					<view class="left-icon">
						<u-icon size="40" name="phone"></u-icon>
					</view>
					<view class="right-content">
						<input type="number" maxlength="11" v-model="mobile" placeholder="请输入">
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="submit-box">
			<view class="submit" @click="submit">消耗5好人值发布</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgArr: [],
				info: '', //内容
				address: '', // 地址
				mobile: '', // 手机号
			}
		},
		methods: {
			
			goToSelectMap() {
				uni.navigateTo({
					url: '/pages/page/shopadmin/circle/selectMap'
				})
			},
			
			//上传图片
			addImgFile() {
				const self = this;
				uni.chooseImage({
					count: 3-this.imgArr.length, // 默认9
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: res => {
						// 设置url的值，显示控件
						let url = res.tempFilePaths;
						self.$api.get({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								for(let i = 0; i < url.length; i++) {
									this.$api.upload({
										url: updata.uploadurl,
										filePath: url[i],
										name: 'file',
										formData: updata.storage == 'local' ? null : updata
											.multipart,
										success: res => {
											self.imgArr.push(res.url)
										}
									});
								}
							}
						});
					}
				});
			},
			
			//发布
			submit() {
				let { info, address, mobile, imgArr } = this;
				if(info == '') return uni.showToast({title: '请输入要发布的内容', icon: 'none'})
				if(mobile == '') return uni.showToast({title: '请输入手机号', icon: 'none'})
				let to_shop_id = uni.getStorageSync('userShopId');
				this.$api.get({
					url: '/wanlshop.shop/shopFabu',
					data: {
						info,
						address,
						mobile,
						to_shop_id,
						images: imgArr.join(',')
					},
					success: res => {
						uni.showToast({
							title: '发布成功',
							icon: 'success'
						})
						let pages = getCurrentPages();
						let page = pages[pages.length - 2];
						page.$vm.popupType = true;
						setTimeout(() => {uni.navigateBack()}, 1200)
					}
				});
			}
		}
	}
</script>

<style scoped>
.page {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: #FFFFFF !important;
	overflow-y: scroll;
}
.show-box {
	padding: 40rpx 60rpx;
	width: 100%;
	box-sizing: border-box;
}
.textarea {
	width: 100%;
}
.textarea textarea {
	width: 100%;
	height: 200rpx;
}
.upfile-img-box {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.img-box {
	width: 190rpx;
	height: 190rpx;
	margin-right: 15rpx;
	background-color: #F6F6F6;
	position: relative;
}
.img-box image {
	width: 100%;
	height: 100%;
}
.img-close {
	position: absolute;
	z-index: 99;
	right: 11rpx;
	top: 10rpx;
}
.submit-box {
	width: 100%;
	padding: 0 30rpx;
	box-sizing: border-box;
	position: absolute;
	bottom: 80rpx;
}
.border-top {
	border-top: solid 1rpx #f1f1f1;
}
.label-box {
	display: flex;
	flex-direction: column;
	margin-top: 150rpx;
}
.item-label {
	width: 100%;
	display: flex;
	border-bottom: solid 1rpx #f1f1f1;
	padding: 30rpx 15rpx;
	align-items: center;
}
.left-icon {
	font-size: 30rpx;
	color: 000000;
	flex-shrink: 0;
	margin-right: 35rpx;
}
.right-content {
	width: 100%;
	display: flex;
	justify-content: space-between;
	font-size: 30rpx;
	line-height: 30rpx;
	align-items: center;
}
.right-content input {
	width: 100%;
	height: 100%;
}
.submit {
	width: 100%;
	height: 80rpx;
	background: linear-gradient(90deg, #FE5603, #FD6400);
	border-radius: 40rpx;
	font-size: 32rpx;
	color: white;
	font-weight: bold;
	text-align: center;
	line-height: 80rpx;
}
</style>
